<template>
	<view class="container">
		<view class="title">
			充值金额：
		</view>
		<view class="jineInput">
			<text class="icon">¥</text>
			<input class="uni-input" type="digit" v-model="money" @input="onKeyInput" focus
				placeholder="充值金额" />
		</view>
		<view class="jineSelect">
			<view :class="['item',{'active':activeIndex===index}]" v-for="(item,index) in info.money_arr"
				@click="selectJine(item,index)" :key="index">
				{{item}}
			</view>
		</view>
		<view :class="['btn',{'btnActive':!dis}]" @click="pay()">
			确认充值
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: '',
				info: "",
				activeIndex: '',
				dis: true
			}
		},
		created() {
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getData()
				}
			});
		},
		methods: {
			pay() {
				if (this.dis) {
					uni.showToast({
						title: '请选择或输入付款金额！',
						icon: 'none'
					});
					return false;
				} else {
					let param = {
						"money": this.money,
						'token': this.token,
						'pay_type': 'wechat',
						'openid': uni.getStorageSync('openid')
					};
					uni.request({
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						url: 'https://mx.acktechnologies.com.cn/api/wxapp/mine/recharge/rechargePayment',
						method: 'POST',
						data: param,
						success: res => {
							console.log(res)
							if (res && res.data) {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									success: function(res) {
										console.log('success:' + JSON.stringify(res));
										uni.navigateTo({
											url:"./success"
										})
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
							} else {
								uni.showToast({
									title: res.data.msg,
									duration: 2000,
									icon: 'none',
								});
							}

						},
						fail: (res) => {
							console.log(res)
						},
						complete: (res) => {
							console.log(res)
						}
					});
				}
			},
			onKeyInput(e) {
				if (this.activeIndex !== '') {
					this.activeIndex = '';
				}
				if (this.money !== '') {
					this.dis = false;
				} else {
					this.dis = true;
				}
				let amount = e.detail.value;
					amount= /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(amount) ? amount : amount.substring(0,amount.length-1)
					// setTimeout(() => {
						
					// }, 1);
				//e.detail.value = e.target.value.match(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/g)[0];
				this.$nextTick(()=> {
					this.money = Number(amount);
				});
			},
			selectJine(obj, index) {
				this.money = obj;
				this.activeIndex = index;
				if (this.money !== '') {
					this.dis = false;
				} else {
					this.dis = true;
				}
			},
			getData() {
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/recharge/info`,
					data: {
						"token": this.token,
					},
					method: 'GET',
					success: res => {
						console.log(res)
						if (res.data.code === 1) {
							this.info = res.data.data;
						} else if (res.data.code === 403||res.data.code === 401) {
							uni.redirectTo({
								url: '../../login/auth?redirect=../my/wallet/chongzhi'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 0 40rpx;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
	}

	.title {
		font-size: 17px;
		font-weight: 500;
		color: #333333;
		margin: 40rpx auto;
	}

	.jineInput {
		width: 636rpx;
		padding-bottom: 26rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 1px solid #E3E3E3;
		;

		.icon {
			margin-right: 12rpx;
		}
	}

	.jineSelect {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;

		.item {
			background: #FFFFFF;
			border-radius: 5px;
			border: 1px solid #EAEAEA;
			padding: 32rpx 60rpx;
			font-size: 17px;
			font-weight: 500;
			color: #333333;
			margin: 40rpx 40rpx 0 0;
		}

		.active {
			color: #F0A262;
			border: 1px solid #F0A262;
		}
	}

	.btn {
		width: 670rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		background: #E5E5E5;
		border-radius: 48rpx;
		font-size: 18px;
		color: #999999;
		margin-top: 160rpx;
	}

	.btnActive {
		color: #FFFFFF;
		background: linear-gradient(90deg, #FF5C2E 0%, #FD5629 100%);
	}
</style>
